---
{
	"title": "Balise details fermée",
	"language": "fr",
	"category": "Plugiciels",
	"categoryfile": "plugins",
	"description": "Garder les éléments details visés fermés sur écran défini et moins.",
	"altLangPrefix": "details-close",
	"dateModified": "2025-08-27"
}
---

<h2>Objectif</h2>
<p>Garder les éléments <code>details</code> sélectionnés fermés sur une fenêtre définie et en dessous. Si aucun écran n'a été défini, l'écran par défaut est petit.</p>

<h2>Exemple fonctionnel</h2>
<ul>
	<li><a href="../../../demos/details-close/details-close-fr.html">Exemple par défaut</a></li>
</ul>

<h2>Évaluation et rapport</h2>
<p>Aucune évaluation ni rapport n'est disponible pour ce composant.</p>

<h2>Comment l'implémenter</h2>
<ol>
	<li>Ajoutez la classe CSS <code>wb-details-close</code> à tout élément <code>&lt;details></code> que vous souhaitez fermer sur un point de rupture défini et des points de rupture plus petits.</li>
	<li>Optionnellement, ajoutez l'attribut <code>data-breakpoint</code> avec l'une des valeurs suivantes, et l'élément <code>&lt;details></code> restera fermé sur ce point de rupture et les points de rupture plus petits (par défaut est "sm") :
		<ul>
			<li>xxs</li>
			<li>xs</li>
			<li>sm</li>
			<li>md</li>
			<li>lg</li>
		</ul>
	</li>
</ol>

<h3>Configuration</h3>
<table class="table">
	<tr>
		<th>Nom de la propriété</th>
		<th>Type</th>
		<th>Description</th>
		<th>Valeurs</th>
	</tr>
	<tr>
		<td><code>[data-breakpoint]</code></td>
		<td><code>String</code></td>
		<td>Définit la fenêtre maximale à partir de laquelle l'élément <code>&lt;details></code> est fermé.</td>
		<td>xxs, xs, sm, md, lg</td>
	</tr>
</table>

<h3>Fonction</h3>
<table class="table">
	<tr>
		<th>Type de fonction</th>
		<th>Nom</th>
		<th>Comment l'implémenter</th>
		<th>Ce qu'elle fait</th>
	</tr>
	<tr>
		<td>Événement jQuery</td>
		<td><code>wb-init.wb-details-close</code></td>
		<td>Déclenché manuellement (par exemple, <code>$( ".wb-details-close" ).trigger( "wb-init.wb-details-close" );</code>).</td>
		<td>Initialise le plugiciel details-close. Ce plugiciel sera initialisé automatiquement sauf si l'élément <code>.wb-details-close</code> est ajouté après le chargement de la page et que wet-boew a été initialisé.</td>
	</tr>
	<tr>
		<td>Événement jQuery</td>
		<td><code>wb-ready.wb-details-close</code></td>
		<td>Déclenché automatiquement après l'initialisation du plugiciel.</td>
		<td>Utilisé pour identifier quand et où le plugiciel est initialisé (cible de l'événement).
			<pre><code>$( document ).on( "wb-ready.wb-details-close", ".wb-details-close", function( event ) {
});</code></pre>
			<pre><code>$elm.on( "wb-ready.wb-details-close", function( event ) {
});</code></pre>
		</td>
	</tr>
</table>

<h2>Code source</h2>
<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/details-close">Code source des détails fermés sur mobile sur GitHub</a></p>
